<template>
  <div class="system-management">
    <div class="content-block">
      <div class="online-users">
        <h3>当前在线人数</h3>
        <p class="number">{{ onlineUsers }}</p>
      </div>
      <div class="total-users">
        <h3>今日登录用户</h3>
        <p class="number">{{ totalUsers }}</p>
      </div>
      <div class="welcome-message">
        <h3 @click="getMemory">内存占用</h3>
        <el-progress type="circle" @click="getm" :percentage="memoryCircle"></el-progress>
        <p>已经使用<font color="#409EFF"> {{ useMemory }} </font> MB,还剩 <font color="#909399">{{maxMemory-useMemory}}</font> MB,总 <font color="#67C23A">{{ maxMemory }}</font> MB</p>
      </div>
    </div>
    <div class="chart-block">
      <div class="chart-title">
        <h3>网站活跃统计</h3>
        <h6>仅展示最近七天记录</h6>
      </div>
      <div class="chart-container">
        <div id="login-chart" class="chart"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { mapGetters } from 'vuex'
import count from '@/api/system'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data() {
    return {
      onlineUsers: 0, //在线人数
      totalUsers: 0, //总用户
      loginData: [], //统计数据
      useMemory:0, //内存使用
      maxMemory:0, //最大内存
      memoryCircle:0
    };
  },
  created() {
    this.getHistoryData()
    this.getOnlineUser()
    this.getMemory()
  },
  methods: {
    //获取在线人数统计 最近七天
    getOnlineUser(){
      count.selectOnlineUser()
        .then(response => {
          this.onlineUsers = response.data.onlineSize;
          this.totalUsers = response.data.totalSize;
        })
    },
    //获取历史登录数据
    getHistoryData(){
      count.selectHistoyData()
        .then(response=>{
          this.loginData = response.data.loginData;
          this.renderChart()
        })
    },
    //设置统计图表
    renderChart() {
      const chart = echarts.init(document.getElementById('login-chart'));
      const dates = this.loginData.map(item => item.date);
      const counts = this.loginData.map(item => item.count);
      //反转下数据，后端传过来的数据是从大到小，而这里应该是从小到大 日期
      dates.reverse();
      counts.reverse();
      const option = {
        xAxis: {
          type: 'category',
          data: dates
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: counts,
            type: 'bar',
            showBackground: true,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#83bff6' },
            { offset: 0.5, color: '#188df0' },
            { offset: 1, color: '#188df0' }
          ])
        },
        emphasis: {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#2378f7' },
              { offset: 0.7, color: '#2378f7' },
              { offset: 1, color: '#83bff6' }
            ])
          }
        },
          }
        ]
      };
      chart.setOption(option);
    },
    //获取内存情况
    getMemory(){
      count.selecSystemInfo()
        .then(response=>{
          this.useMemory = parseInt(response.data.useMemory);
          this.maxMemory = parseInt(response.data.maxMemory);
          this.memoryCircle = parseInt( this.useMemory/this.maxMemory) < 1 ? 1 : parseInt( this.useMemory/this.maxMemory);
        })
    },
  }
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.system-management {
  padding: 20px;
}

.content-block {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.online-users,
.total-users,
.welcome-message {
  width: 30%;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-align: center;
}

h3 {
  margin-bottom: 10px;
}

.number {
  font-size: 24px;
  font-weight: bold;
}

.chart-block {
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 4px;
}

.chart-title {
  text-align: center;
  margin-bottom: 20px;
}

.chart-container {
  height: 400px;
}

.chart {
  height: 100%;
}
</style>